---
import Banner from "../components/Banner.vue";
import Layout from "../layouts/Layout.astro";
import data from "virtual:json-conf";
import Interract from "../components/Interract.vue";

const { contact } = data;

const { swiper, text } = contact || {
  swiper: [],
  text: "",
};
---

<Layout>
  <div>
    {swiper?.map((item) => <Banner client:only="vue" banners={item} />)}
  </div>

  <div class="col-7 felx w-full container <lg:p-16px p-80px m-auto">
    <div class="content lg:pt-50px lg:flex justify-between w-full">
      <div set:html={text} class="lg:w-48% <lg:w-full" />
      <div class="lg:w-48% <lg:w-100%">
        <Interract client:load />
      </div>
    </div>
  </div>
</Layout>
